<template>
	<div class="w-leftcardcommon">
		<div class="menuList shrink0">
			<div class="w-contitle">{{columnName}}</div>
			<ul>
				<li v-for="(item,index) in menuList" :key="index">
					<div class="w-menuLeftbox flex hs vs" @click="showToggle(item,index)" :class="{active:acBig==item.id}">
						<p class="dian shrink0"></p>
						<p class="w-leftname">{{item.name}}</p>
					</div>
					<ul class="w-item-ul w-paddleft" v-show="item.ischildren">
						<li v-for="(bitem,bindex) in item.children" :key="bindex" @click="showToggle2(bitem,bindex)">
							<div class="w-menuLeftbox flex hs vs" :class="{active:acSml==bitem.id}">
								<p class="dian shrink0"></p>
								<p class="w-leftname">{{bitem.name}}</p>
							</div>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<div class="w-banner_right" v-if="isBottom">
			<div class="w-xiang">相关操作</div>
			<ul>
        <li>
          <router-link :to="{path:'/donation_guide',query:{deAcBig:1}}">捐赠形式</router-link>
          <img src="../../assets/img/index/line.png" alt="">
        </li>
        <li>
          <router-link :to="{path:'/donation_guide',query:{deAcBig:3}}">捐赠答疑</router-link>
          <img src="../../assets/img/index/line.png" alt="">
        </li>
        <li>
          <router-link :to="{path:'/aboutus',query:{deAcBig:4}}">联系我们</router-link>
        </li>
			</ul>
<!--			<router-link v-if="isToDonate" :to="{path:'/donation_projects'}" class="todonate">我要捐赠</router-link>-->
			<div class="phonebox flex hc vc">
				<img src="../../assets/img/index/phone.png" alt="" class="phoneimg">
				<p>0357-2051369</p>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "Leftcard",
		props: {
			menuList: {
				type: Array,
				default: () => []
			},
			columnName: {
				type: String,
				default: '默认显示的信息',
			},
			isBottom:{
				type:Boolean,
				default:true
			},
			isToDonate:{
				type:Boolean,
				default:true
			},
			deAcBig:{
				type: String,
				default: '0',
			},
			deAcSml:{
				type: String,
				default: '0',
			},
      isBackHome: {
			  type: Boolean,
        default: false
      }
		},

    watch: {
      isBackHome: {
        handler(newVal, oldVal) {
          if (newVal) {
            this.showIdway()
          }
        }
      }
    },

		data() {
			return {
				title: '基金会简介',
				acBig: '',//父元素id
				acSml:'',//子元素id
			};
		},
		mounted() {
		  // this.menuList.forEach(item => {
		  //   item.ischildren = false
      // })

			this.showIdway()
		},
		methods: {
			showIdway() {
				console.log(this.menuList)
				if(this.deAcBig == 0){
					if (this.menuList[0].children) {
						this.menuList[0].ischildren = true
						this.acBig = this.menuList[0].id
						this.acSml =this.menuList[0].children[0].id
					} else {
						this.acBig = this.menuList[0].id
					}
				} else {
					if (this.menuList[this.deAcBig-1] && this.menuList[this.deAcBig-1].children) {
						this.menuList[this.deAcBig-1].ischildren = true
						this.acBig = this.deAcBig
						this.acSml =this.deAcSml
					} else {
						this.acBig = this.deAcBig
					}
				}
				var arr={}
				arr.acBig=this.acBig
				arr.acSml=this.acSml
				console.log(arr)
				var str=JSON.stringify(arr);
				this.$emit('aa', str)
			},
			showToggle: function(item, ind) {
				this.menuList.forEach(i => {
					if (i.ischildren !== this.menuList[ind].ischildren) {
						i.ischildren = false;
					}
				});
				if (!item.children) {
					this.acBig = item.id.toString()
				} else {
					item.ischildren = !item.ischildren;
					this.acBig = item.id
					this.acSml =item.children[0].id
				}
				var arr={}
				arr.acBig=this.acBig
				arr.acSml=this.acSml
				console.log("1",arr)
				var str=JSON.stringify(arr);
				this.$emit('aa', str)
			},
			showToggle2: function(item, ind) {
				var arr={}
				this.acSml=item.id
				arr.acBig=this.acBig
				arr.acSml=this.acSml
				console.log("2",arr)
				var str=JSON.stringify(arr);
				this.$emit('aa', str)
			},
		}
	};
</script>
<style scoped>
	.w-paddleft {
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
	}

	.w-contitle {
		font-size: 24px;
		color: rgba(118, 42, 42, 1);
		padding-top: 38px;
		padding-bottom: 20px;
		text-align: center;
		font-weight: 600;
	}

	.menuList {
		background: linear-gradient(180deg, rgba(226, 212, 189, 1) 0%, rgba(255, 255, 255, 1) 100%);
		margin-bottom: 58px;
	}

	.dian {
		width: 6px;
		height: 6px;
		background: rgba(102, 102, 102, 1);
		border-radius: 50%;
		margin-right: 13px;
		margin-left: 3vw;
		margin-top: 10px;
	}

	.w-leftname {
		font-size: 18px;
		color: rgba(51, 51, 51, 1);
		font-weight: 600;
		line-height: 1.5;
	}

	.w-leftname:hover {
		color: #791C1C;
	}

	.menuList li {
		padding: 10px 0;
		padding-right: 34px;
	}

	.menuList li li {
		padding-right: 0px;
	}

	.w-menuLeftbox {
		padding: 6px 0;
		cursor:pointer;
	}

	.active .w-leftname {
		color: #791C1C;
	}

	/* 相关操作 */

	/* 左侧下 */
	.w-xiang {
		font-size: 24px;
		color: #fff;
		text-align: center;
	}

	.w-banner_right {
		width: 100%;
		background: #731A1A;
		padding: 39px 22px;
		box-sizing: border-box;
		color: #fff;
		text-align: center;
	}

	.w-banner_right ul {
		padding: 23px 0 13px;
	}

	.w-banner_right li a {
		color: #fff;
		font-size: 18px;
		padding: 20px 0;
		display: block;
	}

	.w-banner_right li img {
		display: block;
		width: 90%;
		margin: 0 auto;
	}

	.todonate {
		display: block;
		color: #fff;
		font-size: 20px;
		width: 90%;
		margin: 0 auto;
		padding: 12px 0;
		background: #8D2F33;
		border-radius: 5px;
		border: 1PX solid #DD908E;
	}

	.phonebox {
		font-size: 20px;
		color: #fff;
	}

	.phonebox img {
		width: 30px;
		display: block;
		margin-right: 9px;
	}
</style>
